import React, { useState } from 'react'
import { Button, Form, Modal } from 'antd'
import '../index.less'

interface IDetailsInfo {
  stuName: string,
  stuID: number,
  school: string,
  stuClass: string,
  address: string,
  phone: number,
}

interface IProps {
  detailsInfo: IDetailsInfo
}

function Details(props:IProps) {
  const [showForm,setShowForm] = useState(false)
  // 控制弹窗显隐
  const ctrlForm = () => {
    setShowForm(!showForm);
  };

  return (
    <>
      <Modal 
        open={showForm} 
        onCancel={ctrlForm}
        getContainer={false} 
      >
        <p className='formTitle'>学生详情</p>
        <Form 
          name="stuForm" 
          labelAlign={'left'}
          initialValues={{ remember: true, }} 
          autoComplete="off" 
        >

          <Form.Item style={{ marginBottom: 0, }} wrapperCol={{ offset: 2, span: 20, }}>
            <Form.Item
              label="学生姓名"
              name="stu_name"
              labelCol={{ span: 7, }}
              wrapperCol={{ span: 14, }}
              style={{ display: 'inline-block', width: '50%'}}
            >
              {props.detailsInfo.stuName}
            </Form.Item>
            <Form.Item
              label="学号"
              name="stu_ID"
              labelCol={{ offset:2 , span: 7, }}
              wrapperCol={{ span: 14, }}
              style={{ display: 'inline-block', width: '50%'}}
            >
              {props.detailsInfo.stuID}
            </Form.Item>
          </Form.Item>

          <Form.Item style={{ marginBottom: 0, }} wrapperCol={{ offset: 2, span: 20, }}>
            <Form.Item
              label="所属学校"
              name="stu_school"
              labelCol={{ span: 7 }}
              wrapperCol={{ span: 14, }}
              style={{ display: 'inline-block', width: '50%'}}
            >
              {props.detailsInfo.school}
            </Form.Item>
            <Form.Item
              label="所属班级"
              name="stu_class"
              labelCol={{ offset:2 , span: 7, }}
              wrapperCol={{ span: 14, }}
              style={{ display: 'inline-block', width: '50%'}}
            >
              {props.detailsInfo.stuClass}
            </Form.Item>
          </Form.Item>

          <Form.Item
            label="家庭住址"
            name="stu_address"
            labelCol={{ offset:2 , span:3 }}
            wrapperCol={{ span: 17, }} 
          >
            {props.detailsInfo.address}
          </Form.Item>

          <Form.Item
            label="联系方式"
            name="stu_phone"
            labelCol={{ offset:2 , span:3 }}
            wrapperCol={{ span: 6, }} 
          >
            {props.detailsInfo.phone}
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 10, span: 12}} >
            <Button 
              className='confirm' 
              type="primary" 
              htmlType="submit" 
              size='large'
              onClick={ctrlForm}
            >
              确认
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <span className='inner_buttons' onClick={ctrlForm}>详情</span>
    </>
  )
}

export default Details